<template>
  <el-drawer title="媒体日志" v-model="dialogVisible" size="40%">
    <el-card shadow="never" class="border-0 mb-3">
      <div class="flex items-center">
        <div class="ml-3">
          <p>上传用户：{{ info.creator_user }}</p>
          <p>媒体状态：{{ info.typename }}</p>
        </div>
      </div>
    </el-card>
    <el-card shadow="never" class="border-0 border-t">
      <el-timeline class="ml-[-40px]">
        <el-timeline-item
          :timestamp="item.time"
          placement="top"
          :type="item.type"
          :icon="item.icon"
          :hollow="item.hollow"
          :size="item.size"
          v-for="(item,index) in info.list"
          :key="index"
        >{{ item.status }}</el-timeline-item>
      </el-timeline>
    </el-card>
  </el-drawer>
</template>
<script setup>
import { ref } from 'vue'
const dialogVisible = ref(false)
const info = ref({})
const open = media_logs => {
  if (media_logs.typename != '已分发') {
    var myDate = new Date().toLocaleDateString()
    if (media_logs.typename == '保存') {
      media_logs.list.push({
        status: '待提交',
        time: myDate,
        type: 'primary',
        hollow: true,
        size: 'large',
      })
    } else if (media_logs.typename == '审核中') {
      media_logs.list.push({
        status: '待审核',
        time: myDate,
        type: 'primary',
        hollow: true,
        size: 'large',
      })
    } else if (media_logs.typename == '已通过') {
      media_logs.list.push({
        status: '待分发',
        time: myDate,
        type: 'primary',
        hollow: true,
        size: 'large',
      })
    } else if (media_logs.typename == '未通过') {
      media_logs.list.push({
        status: '待修改',
        time: myDate,
        type: 'primary',
        hollow: true,
        size: 'large',
      })
    } else if (media_logs.typename == '分发中') {
      media_logs.list.push({
        status: '待发布',
        time: myDate,
        type: 'primary',
        hollow: true,
        size: 'large',
      })
    }

    // 数组去重
    let map = new Map();
    media_logs.list.forEach((item) =>{
      if (!map.has(item.status)){
        map.set(item.status,item)
      }
    })
    media_logs.list = [...map.values()]
  }
  info.value = {
    typename: media_logs.typename,
    creator_user: media_logs.creator_user,
    list: media_logs.list.map(o => {
      if (o.types) {
        if (o.types == 'success') {
          o['icon'] = 'Check'
        } else if (o.types == 'danger') {
          o['icon'] = 'Close'
        } else if (o.types == 'primary') {
          o['hollow'] = true
        }
        o['type'] = o.types
        delete o.types
      }
      o.time = o.time.replace('T', ' ').split('.')[0]
      o['size'] = 'large'

      return o
    }),
  }
  //   //  [
  //   //   { status: '新建', time: '2022-03-12 14:22:03', type: 'success', icon: 'Check', size: 'large' },
  //   //   { status: '提交', time: '2022-03-12 14:22:03', type: 'success', icon: 'Check', size: 'large' },
  //   //   { status: '退回', time: '2022-03-11 14:22:03', type: 'danger', icon: 'Close', size: 'large' },
  //   //   { status: '提交', time: '2022-03-12 14:22:03', type: 'success', icon: 'Check', size: 'large' },

  //   // ]
  //   // { status: '当前', time: '2022-03-13 14:22:03', type: 'primary', hollow: true, size: 'large' },
  //   //   { status: '已通过', time: '2022-03-14 14:22:03', size: 'large' },
  //   //   { status: '已分发', time: '2022-03-14 14:22:03', size: 'large' },
  // }
  dialogVisible.value = true
  return true
}

defineExpose({
  open,
})
</script>